<template>
    <div id="login">

        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
            class="demo-ruleForm login-container">
            <h3 class="title">登陆界面</h3>
            <el-form-item prop="userClass">
                <el-select v-model="loginForm.userClass" style="width: 350px; " placeholder="请选择用户类型">
                    <el-option label="组织者" value="zuzhizhe"></el-option>
                    <el-option label="专家" value="zhuanjia"></el-option>
                    <!-- <el-option label="游客" value="youke"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item prop="account">
                <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="请输入账号"></el-input>

            </el-form-item>
            <el-form-item prop="checkPass">
                <el-input type="password" v-model="loginForm.checkPass" auto-complete="off" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-row type="flex" justify="space-between">
                <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
                <el-button type="text" style="padding:0px;height: 20px;" @click.native.prevent="yktz()">游客登录</el-button>
            </el-row>
            <el-form-item style="width:100%;">
                <el-button type="primary" class="loginBtn" @click.native.prevent="handleSubmit('loginForm')"
                    :loading="logining">登录
                </el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                logining: false,
                loginForm: {
                    account: '',
                    checkPass: '',
                    userClass: 'zhuanjia'
                },
                loginRules: {
                    userClass: [
                        { required: true, message: '请选择用户类型', trigger: 'change' },
                    ],
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    checkPass: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                },
                checked: true
            }
        },

        methods: {
            yktz() {
                var user = {
                    userClass: '游客',
                }
                sessionStorage.setItem('user', JSON.stringify(user));
                this.$router.push({ name: 'secondsurvey', params: { user: user } })
            },
            handleSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.loginForm.userClass != 'youke') {
                            var that = this;
                            // 对应 Python 提供的接口，这里的地址填写下面服务器运行的地址，本地则为127.0.0.1，外网则为 your_ip_address
                            const path = 'http://127.0.0.1:5000/getUser';
                            axios({
                                method: 'post',
                                url: path,
                                data: {
                                    'id': that.loginForm.account,
                                    'type': that.loginForm.userClass,
                                    'passwd': that.loginForm.checkPass
                                }
                            })
                                .then(function (response) {
                                    // 这里服务器返回的 response 为一个 json object，可通过如下方法需要转成 json 字符串
                                    // 可以直接通过 response.data 取key-value
                                    // 坑一：这里不能直接使用 this 指针，不然找不到对象
                                    //var msg = response.data.msg;
                                    // 坑二：这里直接按类型解析，若再通过 JSON.stringify(msg) 转，会得到带双引号的字串
                                    //that.serverResponse = msg;
                                    if (response.data == '888') { that.$message.error('密码错误'); }
                                    else if (response.data == '889') { that.$message.error('账号错误'); }
                                    else if (response.data[0] == that.loginForm.account) {
                                        //登陆成功
                                        //用户信息存入内存
                                        var user = {
                                            id: response.data[0],
                                            uname: response.data[1],
                                            userClass: that.loginForm.userClass

                                        }
                                        sessionStorage.setItem('user', JSON.stringify(user));
                                        //跳转到第一个调查表
                                        that.$router.push({ name: 'forthsurvey', params: { user: user } })
                                        that.$message({
                                            message: '登陆成功',
                                            type: 'success'
                                        });

                                    }
                                }).catch(function (error) {
                                    console.log('Error' + error);
                                    that.$message.error('登录错误请重试！！');

                                })
                        } else {
                            that.$message.error('填写错误请重试！！');
                            var user = {
                                id: '0',
                                uname: 'admin',
                                userClass: that.loginForm.userClass
                            }
                            sessionStorage.setItem('user', JSON.stringify(user));
                            //跳转到第一个调查表
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

        }
    }
</script>


<style scoped>
    #login {
        width: 100%;
        height: 100%;
        background: url(../../assets/bg.jpg) no-repeat;
        background-size: cover;
        position: absolute;
        background-attachment: fixed;
    }

    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 200px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        /* border: 1px solid #eaeaea; */
        background: #0000007a;
        color: #fff;
    }

    .el-input /deep/ .el-input__inner {

        background-color: #fff0;
        border-radius: 4px;
        border: 1px solid #dfe1e4;
        color: #fafafa;

    }

    .el-select /deep/ .el-input__inner {

        background-color: #fff0;
        border-radius: 4px;
        border: 1px solid #dfe1e4;
        color: #fafafa;

    }

    .title {
        margin: 0px auto 40px auto;
        text-align: center;
    }

    .remember {
        margin: 0px 0px 35px 0px;
    }

    .loginBtn {
        width: 100%;
        font-size: 20px;
        letter-spacing: 10px;
    }
</style>